import React,{Component} from 'react';
import './App.css';
import { Table,Button,Rate,Modal,DatePicker,Input,Select    } from 'antd';

import request from './util/request';

import moment from 'moment';

const { Option } = Select;




class App extends Component {
    state = {
        list:[],  //每页表格数据
        total:0,  //总条数    
        page:1,   //当前的页码  
        visible:false, //控制弹窗显示隐藏
        create_time:new Date(),  //时间
        title:'',   //标题
        status:'',   //状态
        import_num:0,  //重要性
        id:''   //修改id
    }
    componentDidMount(){
        //获取表格的数据
        this.getList();
    }

    getList = () => {
        //起始下标

        /**
         * 1  0  2
         * 2  2  2
         * 3  4  2
         * 
        */
       let {page} = this.state;
        let start = (page-1)*2;
        request.get('/api/list',{start,count:2}).then(res => {
            console.log(res);
            if(res.code === 1){
                this.setState({
                    list:res.data,
                    total:res.total
                })
            }
        })
    }
    render(){
        let {list,total,title,create_time,status,import_num} = this.state;

        //列
        const columns = [
            {
                title: '时间',
                dataIndex: 'create_time',
            },
            {
                title: '标题',
                dataIndex: 'title',
            },
            {
                title: '作者',
                dataIndex: 'author',
            },
            {
                title: '重要性',
                // dataIndex: 'import_num',
                render:(obj) => {
                    return <Rate count={obj.import_num}></Rate>
                }
            },
            {
                title: '阅读数',
                dataIndex: 'num',
            },
            {
                title: '状态',
                dataIndex: 'status',
            },
            {
                title: '操作',
                dataIndex: '',
                render: (obj) => <div>
                        <Button onClick={() => {this.edit(obj)}}>编辑</Button>
                        <Button>发布</Button>
                        <Button>删除</Button>
                    </div>
                }
        ];
        return (
            <div className="App">
                <div>status：{status}</div>
                <Button onClick={this.showModal}>添加</Button>
                <Table columns={columns} dataSource={list} size="middle" rowKey="id"
                    pagination={{
                        total,  //总条数
                        pageSize:2, //每页的条数
                        onChange:this.change
                    }}
                />
                <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    >
                    时间：<DatePicker value={moment(create_time)} format="YYYY-MM-DD HH:mm" showTime onChange={this.changeTime} onOk={this.onOk} /><br></br>
                    标题：<Input value={title} onChange={this.iptChange}></Input><br></br>
                    状态：<Select style={{ width: 200 }}
                                placeholder="Select a person"
                                onChange = {this.selectChange}
                                value = {status}
                            >
                                <Option value="published">published</Option>
                                <Option value="draft">draft</Option>
                            </Select><br></br>
                    重要性：<Rate value={import_num} count={3} onChange={this.importChange}></Rate><br></br>
                </Modal>
            </div>
          );
    }

    //编辑
    edit = (obj) => {
        let {title,create_time,status,import_num,id} = obj;
        this.setState({
            //1.打开弹窗
            //2.给input select rate赋值
            title,
            create_time,
            status,
            import_num,
            visible:true,
            id
        })
    }

    //重要性
    importChange = (value) => {
        this.setState({
            import_num:value
        })
    }

    //选择状态
    selectChange = (value) => {
        console.log(value)
        this.setState({
            status:value
        })
    }

    //修改input框的值
    iptChange = (e) => {
        this.setState({
            title:e.target.value
        })
    }

    //改时间
    changeTime = (value, dateString) => {
        this.setState({
            create_time:dateString
        })
   }

    //改变页码
    change = (page,pageSize) => {
        //page 页码  pageSize 每页条数
        console.log(page,pageSize);
        this.setState({
            page
        },() => {
            this.getList();
        })
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    //点击确认 添加
    handleOk = e => {
        //1.调添加的接口  get post put delete
        let {title,create_time,status,import_num,id} = this.state;
        //添加  编辑
        let url = id ? `/api/list/${id}` : '/api/list';  //请求地址
        let type = id ? 'put' :'post';
        //容错处理
        if(title&&create_time&&status&&import_num){
            request[type](url,{title,create_time,status,import_num,id}).then(res => {
                if(res.code === 1){
                    alert(id?'编辑成功':"添加成功");
                    //2.关掉弹窗 //3.清空input select time的值
                    this.setState({
                        visible: false,
                        title:'',
                        create_time:new Date(),
                        status:'',
                        import_num:0,
                        id:''
                    },() => {
                        this.getList();
                    });
                }
            })
        }else{
            alert("参数不全")
        }
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
}

export default App;

/**
 * 1.成绩管理系统：在前端做的分页  从后台把所有的数据都请求回来
 * 
 * 2.在后端做分页：页码或者起始下标  每页展示的条数  后台返回一个总条数
 * */ 
